document.querySelector('.video ul').onclick = function() {
    document.body.style.overflow = 'hidden'
    document.querySelector('.video-wrapper').style.display = 'block'
}
document.querySelector('.video-wrapper .close').onclick = function() {
    document.body.style.overflow = 'auto'
    document.querySelector('.video-wrapper').style.display = 'none'

    document.querySelector('.video-wrapper video').pause()
}
var cols=[
    {left:0,top:0},
    {left:254,top:0},
    {left:254*2,top:0},
    {left:254*3,top:0}]
    var videoHeight=0
function fun1(){
    for (var num=1; num<=56; num++) 
    {
       
        let liObj = document.createElement('li')
        liObj.style.position = 'absolute'
        liObj.style.display = 'none'
        liObj.innerHTML ='<div><img src="./assets/imgs2/'+num+'.jpg" alt=""></div><span>'+num+' 初秋絮语，用音乐记下你的点点滴滴</span><p><i class="iconfont icon-aixin"></i>'+num+''+num+'.6w喜欢</p>'
        document.querySelector('.video ul').appendChild(liObj)



        liObj.querySelector('img').onload = function() {
            var minHeightIndex =  0
            cols.forEach(function(item,i)  {
                if (cols[minHeightIndex].top > item.top)
                {
                    minHeightIndex = i
                }
            })
            liObj.style.display = 'block' 
            liObj.style.left = cols[minHeightIndex].left + 'px'
            liObj.style.top = cols[minHeightIndex].top + 'px'
            cols[minHeightIndex].top += liObj.offsetHeight    
          
            videoHeight = cols[minHeightIndex].top
      
        }
    }
}
    window.onscroll = function() {
       var clientHeight = window.innerHeight || document.documentElement.clientHeight
       var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop 
    
        if (clientHeight + scrollHeight >= videoHeight)
        {
            fun1()
        }
    }
   window.addEventListener('load',fun1)